<template>
  <div>
    <!-- 国际化：vue-i18n
    1:下载  yarn add vue-i18n@8.0.0
    2:导入
        src/lang/index.js
        import VueI18n from 'vue-i18n'
    3:注册
        import Vue from 'vue'
        Vue.use(VueI18n)
    4:实例化
       const i18n=new VueI18n({
          locale:'语言标识:自己定义的(en/zh)',
          messages:{
            // 语言包
            en:{
                F:'file'
            },
            zh:{
                F:'文件'
            }
          }
       })
    5：暴露出去 export default i18n
    6:在main.js挂载
         import i18n from '@/lang'
         new Vue({
            router,store,。。。
            i18n
         })

    基本使用
       vue
          {{$t('F')}}
          切换语言：this.$i18n.locale='en/zh'
       js
         import i18n from '@/lang'
            i18n===this.$i18n
            i18n.t===$t

    持久化：
      1：值修改了存储到浏览器
      2：初始值读取浏览器存储

    实际开发：完成国际化
      1:准备中文语言包($t同时加上)，要加注释
       zh.js
        {
          模块名:{
             key:中文
          }
        }
      2：其它人会给我们其它语言的语言包
      3：调整样式
    -->
    <h1>{{ $t('xxx') }}</h1>
    <h2>{{ fn() }}</h2>
    <button @click="setLang('zh')">切换成中文</button>
    <button @click="setLang('en')">切换成英文</button>
    <!-- <button @click="btnClick">刷新网站</button> -->
  </div>
</template>
<script>
import jsCookie from 'js-cookie'
export default {
  methods: {
    fn() {
      console.log('fn')
    },
    btnClick() {
      this.$router.go(0)
    },
    setLang(lang) {
      this.$i18n.locale = lang
      jsCookie.set('lang', lang)
      this.$router.go(0)
    }
  }
}
</script>
<style></style>
